import React, { useContext, ReactElement, FC } from 'react';
import {
  Form,
  TextField,
  Password,
  NumberField,
  EmailField,
  UrlField,
  DatePicker,
  Select,
  SelectBox,
  TextArea,
  Button,
  Switch,
  Lov,
} from 'choerodon-ui/pro';
import { ButtonType } from 'choerodon-ui/pro/lib/button/enum';
import { ShowHelp } from 'choerodon-ui/pro/lib/field/enum';
import Store from './stores';

const { Option } = Select;
const From: FC = (): ReactElement => {
  const { FormDataSet } = useContext(Store);
  return (
    <>
      <Form dataSet={FormDataSet} labelWidth={[80, 80, 80]} columns={3}>
        <TextField colSpan={3} pattern="1[3-9]\d{9}" name="phone" />
        <Password name="password" />
        <Password name="confirmPassword" />
        <NumberField rowSpan={2} name="age" min={18} step={1} addonAfter="周岁" />
        <SelectBox colSpan={2} name="sex">
          <Option value="M">男</Option>
          <Option value="F">女</Option>
        </SelectBox>
        <Select name="language">
          <Option value="zh-cn">简体中文</Option>
          <Option value="en-us">英语(美国)</Option>
          <Option value="ja-jp">日本語</Option>
        </Select>
        <EmailField name="email" />
        <TextArea rowSpan={2} colSpan={2} name="description" style={{ height: 80 }} />
        <UrlField name="homepage" showHelp={ShowHelp.tooltip} />
        <DatePicker name="birth" />
        <DatePicker name="birth" />
        <Lov name="code" />
        <Switch name="frozen" />
        <div>
          <Button type={ButtonType.submit}>提交</Button>
          <Button type={ButtonType.reset} style={{ marginLeft: 8 }}>重置</Button>
        </div>
      </Form>
    </>
  );
};

export default From;